import { defineStore } from "pinia";
import { COLLAPSE_KEY } from "@/config/constant";
import { getStorage } from "@/utils/storage";

export type LayoutMode = "Vertical" | "Horizontal"

export type MenuMode = "horizontal" | "vertical"

export interface Layout {
    collapse: boolean,
    mode: LayoutMode,
    menuMode: "horizontal" | "vertical",
}

export interface ConfigState {
    layout: Layout,
}


export const useLayoutStore = defineStore("layout", {
    state: (): ConfigState => {
        return {
            layout: {
                collapse: getStorage(COLLAPSE_KEY),
                mode: "Vertical",
                menuMode: "vertical",
            },
        }
    },
    getters: {
        getLayoutMode: (state) => state.layout.mode,
    },
    actions: {
        setMenuMode(mode: MenuMode) {
            this.layout.menuMode = mode
        },
        setLayoutMode(mode: LayoutMode) {
            this.layout.mode = mode
        },
        setCollapse(collapse: boolean) {
            this.layout.collapse = collapse
        }
    }
})